<template>
    <div class="container mx-auto flex gap-4">
        <HomeBanner :data="articles.data.items" />
        <div>
            <div>news</div>
            <ul>
                <li v-for="article in articles.data.items" class="line-clamp-1">
                    <NuxtLink :to="`/articles/${article._id}`" class="hover:text-green-500">{{ article.title }}
                    </NuxtLink>
                </li>
            </ul>
        </div>
    </div>
    <div class="container mx-auto mt-4">
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item :title="item.title" :name="idx" v-for="(item, idx) in articles.data.items">
                <div>{{ item.desc }}</div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script setup>
const url = `https://xingapi.com/api/v1/curd/xm-articles?skip=0&limit=2`
const { data: articles, error } = await useFetch(url)

const activeNames = ref(['1'])
const handleChange = (val) => {
    console.log(val)
}

onMounted(() => {
    console.log('测试自动移除log')
})
</script>
